<template>
    <el-container> 
        <el-aside width="200px">
            <nav-sider :data="navData" :default-active="name" @select="handleSelectNav"> </nav-sider>
        </el-aside>
        <el-main style="padding:15px;">
            <component :is="layouts[name]" />
        </el-main>
    </el-container>  
</template>

<script lang='ts' setup>
import { onMounted,defineAsyncComponent,ref } from 'vue';
import NavSider from '/@/components/sider.vue';

const layouts: any = {
	defaults: defineAsyncComponent(() => import('./components/default.vue')),
	other: defineAsyncComponent(() => import('./components/other.vue')),
};
let name = ref('defaults')
onMounted(()=>{
    getData()
})
interface NavData {
    icon:string;
    name:string;
    path:string;
    chidren?:any[]
}
let navData = ref<NavData[]>([])
// 获取当前页面的数据
const getData = ()=>{
    navData.value = [
         {
            icon: 'index',
            name: '任务1',
            path: 'defaults',
            chidren:[]
        },
        {
            icon: 'index',
            name: '任务2',
            path: 'other',
            chidren:[]
        },
    ]
    name.value = navData.value[0].path
}

// 点击导航
const handleSelectNav = (key:string)=>{
    console.log(key,'-----')
    name.value = key

}
</script>
<style lang="scss" scoped>

</style>